<template>
	<view class="container">
		<userInfo></userInfo>
		<view class="topTitleBox">
			<view class="listTiteBox">
				<view class="listTitleBackground">
			
				</view>
				<view class="listTitle">
					添加分组照片
				</view>
			</view>
			<view class="addIcon"  v-if="executionStatus == '2'" @click="addBoxShow">+</view>
		</view>
		<block v-for="(item,index) in photoList" :key="index">
			<view class="photoBox">
				<view class="photoBoxTitle">
					<view class="">
						{{item.groupname}}
					</view>
					<view class="delButton"  v-if="executionStatus == '2'" @click="delGroup(index)">
						删除分组
					</view>
				</view>
				<view class="photoList">
					<view class="photoOptions" v-for="(itemIn,indexIn) in item.tLifeSecurityFileInfos" :key="indexIn">
						<view class="addPhotoIconBox" v-if="!itemIn.pathReal" @click="relaceImage(index,indexIn)">
							<image class="addPhotoIcon" src="/static/addIcon.png" mode=""></image>
						</view>
						<view class="addPhotoIconBox2" v-else @click="relaceImage(index,indexIn)">
							<image class="addPhotoIconBox" :src="itemIn.pathReal" mode=""></image>
							<view class="delPhoto" v-if="executionStatus == '2'" @click.stop="delPhoto(item.tLifeSecurityFileInfos,indexIn)">
								删除
							</view>
						</view>
						
						<view class="imageDes" v-if="addBoxIsShow">
							<view class="">
								{{itemIn.filename?itemIn.filename:'添加备注详情(选填)'}}
							</view>
						</view>
						<view class="imageDes" v-else>
							<input v-if="!isOpen||indexIn/2 == 0" @confirm="changeMark(index,indexIn)" @blur="changeMark(index,indexIn)" class="imageDes1" maxlength="10" type="text" placeholder="添加备注详情(选填)" v-model="itemIn.remark">
							<view v-else class="imageDes1">
								{{itemIn.remark?itemIn.remark:'添加备注详情(选填)'}}
							</view>
						</view>
					</view>
					<view class="photoOptions"  v-if="executionStatus == '2'">
						<view class="addPhotoIconBox" @click="addImage(index)">
							<image class="addPhotoIcon" src="/static/addIcon.png" mode=""></image>
						</view>
						<view class="imageDes">
							<view class="">
								点击收集照片
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="line1"></view>
		</block>
		<view class="button" v-if="executionStatus == '2'" @click="link">
			提交
		</view>
		<view class="zhenchayuan">侦查员——{{user.nickName?user.nickName:user.userName}}</view>
		<view class="bottom"></view>
		<view class="addBox" v-if="addBoxIsShow">
			<view class="addBoxIn">
				<view class="addInputBox">
					<input type="text" v-model="addText" class="addInput" placeholder="请输入分组名称" />
				</view>
				<view class="addBoxButtonBox">
					<view class="addBoxCancel" @click="cancel">
						取消
					</view>
					<view class="addBoxConfirm" @click="confirm">
						确定
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import userInfo from '@/pages/components/userInfo.vue'
	export default {
		components:{
			userInfo
		},
		data(){
			return {
				isOpen:false,
				addBoxIsShow:false,
				addText:'',
				photoList:[
					{name:'房屋环境照片',photoArr:[]},
					{name:'户外环境照片',photoArr:[]},
				],
				user:{},
				isSave:'1',
				executionStatus: '2'
			}
		},
		onLoad() {
			this.user = uni.getStorageSync('user')
			this.getDetail()
			this.getTaskDetail()
		},
		methods:{
			// 删除照片
			delPhoto(arr,index){
				let that = this
				uni.showModal({
					content: '是否确认删除该照片？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: async result => {
						if(result.confirm){
							uni.showLoading({
								title:'请稍等...'
							})
							let res = await that.$delete('/app/bus/deletePhoto',{id:arr[index].id},false)
							console.log(res)
							if(res.code == 200){
								arr.splice(index,1)
							}
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 获取分组
			async getTaskDetail(){
				uni.showLoading({
					title:'请稍等...'
				})
				let res = await this.$get('/app/bus/taskMainById?id='+uni.getStorageSync('taskId'),{})
				console.log(res)
				if(res.code == 200){
					this.executionStatus = res.data.executionStatus;
				}
				uni.hideLoading()
			},	
			// 获取分组
			async getDetail(){
				uni.showLoading({
					title:'请稍等...'
				})
				let res = await this.$get('/app/bus/indexGroup?guaranteeNumber='+uni.getStorageSync('guaranteeNumber')+'&taskId='+uni.getStorageSync('taskId'),{})
				console.log(res)
				if(res.code == 200){
					this.photoList = res.data||[]
				}
				uni.hideLoading()
			},
			// 图片上传
			async uploadImage(path,isReplace,index,indexIn){
				
				uni.showLoading({
					title:'请稍等...'
				})
				let res = await this.$uploadFile(path)
				let replace = ''
				let upload = ''
				if(typeof res === 'string'){
					res = JSON.parse(res)
				}
				if(res.code == 200){
					if(isReplace){
						let replaceData = JSON.parse(JSON.stringify(this.photoList[index].tLifeSecurityFileInfos[indexIn]))
						replaceData.pathReal = res.url
						replace = await this.$post('/app/bus/updatePhoto',replaceData,false)
						console.log(replace,'替换')
						if(replace.code == 200){
							this.photoList[index].tLifeSecurityFileInfos[indexIn].pathReal = res.url 
						}
					} else {
						let uploadData = {
							"guaranteeNumber": this.photoList[index].guaranteeNumber,
							"crUser": this.user.userName,
							"groupid": this.photoList[index].id,
							"orderNo": (this.photoList[index].tLifeSecurityFileInfos.length+1)+'',
							"pathReal": res.url,
							"filename": "",
							"remark":""
						}
						upload = await this.$post('/app/bus/savePhoto',uploadData,false)
						console.log(upload,'上传')
						if(upload.code == 200){
							uploadData.id = upload.data
							this.photoList[index].tLifeSecurityFileInfos.push(uploadData)
						}
					}
				}
				uni.hideLoading()
			},
			// 替换照片
			relaceImage(index,indexIn){
				if(this.isSave == '1'){
					return
				}
				let that = this
				uni.chooseImage({
				  count: 1,
				  sizeType: ['original', 'compressed'],
				  sourceType: ['album', 'camera'],
				  success (res) {
					that.uploadImage(res.tempFilePaths[0],true,index,indexIn)
				  }
				})
			},
			// 添加照片
			addImage(index){
				let that = this
				uni.chooseImage({
				  count: 1,
				  sizeType: ['original', 'compressed'],
				  sourceType: ['album', 'camera'],
				  success (res) {
					  that.uploadImage(res.tempFilePaths[0],false,index,0)
				  }
				})
			},
			// 修改备注
			async changeMark(index,indexIn){
				let replaceData = JSON.parse(JSON.stringify(this.photoList[index].tLifeSecurityFileInfos[indexIn]))
				let replace = await this.$post('/app/bus/updatePhoto',replaceData,false)
			},
			// 取消输入
			cancel(){
				this.addText = ''
				this.addBoxIsShow = false
			},
			// 确认输入
			confirm(){
				if(this.addText.replace(/\s/g,'') == ''){
					uni.showModal({
						content:'分组名称不能为空',
						confirmText:'确定',
						showCancel:false
					})
					return
				}
				this.createGroup()
			},
			// 新建分组信息
			async createGroup(){
				uni.showLoading({
					title:'请稍等...'
				})
				let uploadData = {
					"guaranteeNumber": uni.getStorageSync('guaranteeNumber'),
					"crUser": this.user.userName,
					"groupname": this.addText,
					"orderNo": this.photoList.length+1,
					"tableType": "0",
					"mainId": uni.getStorageSync('helpUser').id,
					"taskId":uni.getStorageSync('taskId')
				}
				let upload = await this.$post('/app/bus/saveGroup',uploadData,false)
				console.log(upload,'新建分组')
				if(upload.code == 200){
					uploadData.id = upload.data
					uploadData.tLifeSecurityFileInfos = []
					this.photoList.push(uploadData)
					this.addText = ''
					this.addBoxIsShow = false
				}
				uni.hideLoading()
			},
			// 输入弹框显示
			addBoxShow(){
				this.addBoxIsShow = true
			},
			// 基本信息开关
			isOpenChange(e){
				this.isOpen = e
			},
			link(){
				let arr = []
				this.photoList.forEach(item=>{
					arr.push(...item.tLifeSecurityFileInfos)
				})
				if(arr.length == 0){
					uni.showModal({
						content: '请上传至少一张照片',
						showCancel: false,
						confirmText: '确定'
					});
					return
				}
				uni.showModal({
					content: '一旦提交信息将无法修改，是否确认提交？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: async result => {
						if(result.confirm){
							uni.showLoading({
								title:'请稍等...'
							})
							
							let changeStatus = await this.$get('/app/bus/taskStatusPhoto/' + uni.getStorageSync('taskId'))
							if(changeStatus.code  == 200){
								uni.navigateBack({
									
								})
							}
							uni.hideLoading()
						}
					}
					
				});
				
			},
			// 删除分组
			delGroup(index){
				let that = this
				uni.showModal({
					content: '是否删除该分组?',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: async result => {
						if(result.confirm){
							uni.showLoading({
								title:'请稍等...'
							})
							let res = await that.$delete('/app/bus/deleteGroup',{id:this.photoList[index].id},false)
							console.log(res)
							if(res.code == 200){
								that.photoList.splice(index,1)
							}
							uni.hideLoading()
						}
					}
					
				});
				
			}
		}
	}
</script>

<style scoped>
	.delPhoto{
		width: 80rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 28rpx;
		text-align: center;
		color: white;
		background-color: red;
		position: absolute;
		top: 0;
		right: 0;
	}
	.delButton{
		color: red;
		padding: 0 20rpx;
	}
	.title{
		font-size:26rpx;
		color:#fa5245;
		line-height:1;
		text-align:center;
		padding-bottom:20rpx;
		padding-top:50rpx;
	}
	.bigTitle{
		font-size:34rpx;
		text-align:center;
		margin-top:30rpx;
	}
	.lineOptionsBox{
		width:670rpx;
		border-radius:6rpx;
		border:1rpx solid #ccc;
		display:flex;
		align-items:center;
		height:86rpx;
		padding:0 40rpx;
		margin:0 auto;
		margin-top:30rpx;
		justify-content:space-between;
	}
	.addIcon{
		font-size: 36rpx;
		font-weight: 700;
		padding:20rpx;
		padding-right: 0;
	}
	.addBox{
		position: fixed;
		top: 0;
		left: 0;
		right:0;
		bottom:0;
		background-color: rgba(0,0,0,0.3);
	}
	.addBoxIn{
		width:500rpx;
		position: absolute;
		top:50%;
		left: 50%;
		transform:translate(-50%,-50%);
		background:white;
		border-radius:20rpx;
		padding: 60rpx 40rpx;
		padding-bottom: 40rpx;
	}
	.addInput{
		width: 420rpx;
		border-bottom:1rpx solid #ccc;
		padding-bottom: 20rpx;
	}
	.addBoxButtonBox{
		display: flex;
		margin-top: 60rpx;
		width: 420rpx;
		display: flex;
		justify-content:space-between;
	}
	.addBoxButtonBox view{
		width: 180rpx;
		line-height: 70rpx;
		border-radius: 10rpx;
		text-align: center;
		color:white;
	}
	.addBoxCancel{
		background-color: #3B3B3B;
	}
	.addBoxConfirm{
		background-color: #E4463B;
	}
	.photoBox{
		padding:0 40rpx;
	}
	.photoBoxTitle{
		font-size: 28rpx;
		line-height: 110rpx;
		display: flex;
		justify-content: space-between;
	}
	.photoList{
		display: flex;
		justify-content: space-between;
		flex-wrap:wrap;
	}
	.photoOptions{
		width: 310rpx;
	}
	.addPhotoIconBox{
		width:310rpx;
		height:170rpx;
		background:#f6f6f6;
		justify-content: center;
		align-items: center;
		display: flex;
	}
	.addPhotoIconBox2{
		position: relative;
		width:310rpx;
		height:170rpx;
	}
	.addPhotoIcon{
		width: 74rpx;
		height: 74rpx;
	}
	.imageDes{
		height: 100rpx;
		display: flex;
		align-items: center;
		line-height: 100rpx;
		text-align: center;
		width: 300rpx;
		color: #ccc;
		font-size: 26rpx;
	}
	.imageDes view{
		text-align: center;
		flex: 1;
	}
	.imageDes1{
		text-align: center;
		width: 300rpx;
		color: #ccc;
		font-size: 26rpx;
		display: block;
	}
	.button {
		width: 570rpx;
		line-height: 84rpx;
		text-align: center;
		margin: 0 auto;
		margin-top: 50rpx;
		border-radius: 6rpx;
		background: linear-gradient(90deg, #fa5444, #ff988f);
		font-size: 28rpx;
		color: white;
	
	}
	
	.bottom {
		height: 160rpx;
	}
	.zhongdian{
		color: red;
		width: 40rpx;
		text-align: center;
	}
	.optionsBoxRight{
		display: flex;
		align-items: center;
	}
	.optionsBoxRight1{
		flex:1;		
	}
	.optionsBoxRightIn{
		display: flex;
		align-items: center;
		flex:1;
	}
	.optionsBoxRightIn1{
		/* margin-right: 50rpx; */
	}
	.optionsTitle{
		display: flex;
		align-items: center;
	}
	.optionsTitleIn{
		color:#ccc;
		width: 180rpx;
	}
	.optionsBox{
		display: flex;
		margin-top: 20rpx;
		align-items: flex-start;
	}
	.optionsBox1{
		margin-top: 40rpx;
	}
	.chooseIconFrist{
		margin-left: 50rpx;
	}
	.chooseIcon1{
		margin-left: 20rpx;
	}
	.pingfangmi{
		color: #ccc;
	}
	.pingfangmi text{
		display: inline-block;
		font-size: 18rpx;
		color:#ccc;
		position: relative;
		transform: translateY(-10rpx);
	}
	.bottomOptionsTitle1{
		width: 144rpx;
	}
	.lineOptionsInputBox1{
		flex:1;
	}
	.lineOptionsInputBox1 input{
		flex:1;
	}
	.button1{
		width:570rpx;
		line-height:84rpx;
		text-align:center;
		margin:0 auto;
		margin-top:50rpx;
		border-radius:6rpx;
		background:#656668;
		font-size:28rpx;
		color:white;
	}
	.button{
		width:570rpx;
		line-height:84rpx;
		text-align:center;
		margin:0 auto;
		margin-top:50rpx;
		border-radius:6rpx;
		background:linear-gradient(90deg,#fa5444,#ff988f);
		font-size:28rpx;
		color:white;
		
	}
	.zhenchayuan{
		font-size: 24rpx;
		color:#ccc;
		margin-top: 20rpx;
		text-align: center;
	}
	.bottom{
		height:160rpx;
	}
	.topTitleBox{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx;
		height: 90rpx;
	}
	.listTiteBox {
		position: relative;
	}
	
	.listTitleBackground {
		height: 16rpx;
		width: 120rpx;
		position: absolute;
		bottom: 0;
		right: 0;
		background: linear-gradient(-90deg, #ffd356, #ffffff)
	}
	.listTitle{
		font-size:38rpx;
		position: relative;
	}
	.right {
		width: 34rpx;
		height: 34rpx;
		position: relative;
		transition: all 0.3s;
	}
	.childrenBox{
		width: 600rpx;
		margin: 0 auto;
		height: 0;
		position: relative;
		transition: all 0.3s;
		overflow: hidden;
	}
	.childrenOptionsBox{
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		padding: 20rpx 0;
	}
	.childrenOptionsTitle{
		font-size: 26rpx;
		line-height: 30rpx;
		color: #ccc;
	}
	.childrenOptionsDes{
		font-size: 26rpx;
		line-height: 30rpx;
		width: 450rpx;
		text-align: right;
	}
	.rightOpen{
		transform: rotate(90deg);
	}
	.line1{
		height: 20rpx;
		background-color: #efefef;
	}
	.otherInfo{
		width: 200rpx;
		line-height:70rpx;
		text-align: center;
		font-size: 24rpx;
		color:white;
		border-radius: 35rpx 0 0 35rpx;
		background-color: #3b3b3b;
		position: fixed;
		right: 0;
		top:460rpx;
		font-family: '黑体';
	}
</style>
